<template>
	<!-- 登录 -->
	<view class="login-info">
		<u-avatar :src="userInfo.avatarUrl" size="80"></u-avatar>
		<text class="login-info-name" v-if="flag">{{userInfo.nickName}}</text>
		<text class="login-info-name" v-else @click="loginFn">马上登录</text>
	</view>
</template>

<script>
	export default {
		name: "logininfo",
		data() {
			return {
				userInfo: {
					avatarUrl: "",
					nickName: ""
				},
				flag: false // false代表未登录, true代表已登录
			};
		},
		mounted() {
			let info = uni.getStorageSync("info");
			if (info) {
				this.userInfo = info;
				this.flag = true;
			} else {
				this.loginFn();
			}
		},
		methods: {
			loginFn() {
				if (this.flag) {
					this.flag = true
				} else {
					let _this = this;
					uni.getUserProfile({
						desc: "获取用户头像和昵称",
						success(res) {
							uni.setStorageSync("info", res.userInfo);
							_this.userInfo = res.userInfo;
							_this.flag = true;
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.login-info {
		background-color: #007aff;

		@include flex;
		align-items: center;
		padding: 80rpx 40rpx;

		.login-info-name {
			color: #fff;
			font-size: 40rpx;
			margin-left: 20rpx;
		}

	}
</style>
